<template>
<transition name="fade">
  <div class="setting">
<header-bar :head-title="headTitle" goBack="true"></header-bar>
  <div class="user-body">

    <div class="user-list">
      <router-link to="/userinfo" class="my-title">
            <span class="order-tips"><i class="icon iconfont icon-gerenzhongxin"></i>修改个人资料</span>
            <a href="/member/orders" class="see-order"><i class="icon iconfont icon-more"></i></a>
        </router-link>
        <router-link to="/password" class="my-title">
            <span class="order-tips"><i class="icon iconfont icon-password"></i>修改账号密码</span>
            <a href="/member/orders" class="see-order"><i class="icon iconfont icon-more"></i></a>
        </router-link>
        <router-link to="/address" class="my-title">
            <span class="order-tips"><i class="icon iconfont icon-map"></i>管理收货地址</span>
            <a href="/member/orders" class="see-order"><i class="icon iconfont icon-more"></i></a>
        </router-link>
    </div>
  </div>

    <div class="logout">
        退出当前账号
    </div>
  </div>
</transition>
</template>
<script>
import HeaderBar from '@/components/HeaderBar.vue'
export default {
  name: 'index',
  components: {
    HeaderBar
  },
  data () {
    return {
      headTitle: '设置中心'
    }
  },
  methods: {
  }
}
</script>
<style lang="scss">
.setting{
  height: 100%;
  width: 100%;
  &.fade-enter-active, &.fade-leave-active{
    transition: transform .4s;
    opacity: 1;
}
  &.fade-enter, &.fade-leave-active{
    transform: translate3d( 100%,0, 0);
    opacity: 1;
    }
}
.user-body{padding-bottom: 2rem;}
.logout{
    height: 1.6rem;
    line-height: 1.6rem;
    background: #c74a4a;
    color: #fff;
    text-align: center;
    font-size: .7rem;
    position: fixed;
    width: 100%;
    bottom: 0;
}
.user-list{ margin-top: .2rem;}
    .my-title {
    display: flex;
    height: 1.70667rem;
    line-height: 1.70667rem;
    border-bottom: 1px solid #f6f6f6;
    background-color: #fefefe;
    .order-tips {
      flex: 1;
    font-size: .59733rem;
    text-align: left;
    padding-left: .6rem;
    color: #333;
    font-weight: 200;
    i{
      margin-right: .2rem;
    font-size: .7rem;
    }
}
.see-order {
  flex: 1;
    font-size: .46933rem;
    text-align: right;
    padding-right: .81067rem;
    color: #999;
    font-weight: 200;
}
}

</style>

